<script>
import { layout } from '@/mixins/layout'
import defaultSettings from '@/settings'
export default {
  name: 'DefaultFooter',
  mixins: [layout],
  data() {
    return {
      setting: defaultSettings
    }
  }
}
</script>

<template>
  <div class="footer-body">
    <div class="footer-fix">
      <div class="footer-header">
        <div class="footer-content">
          <div class="footer-image">
            <el-image :src="layoutTheme.footerLogo" />
          </div>
          <div class="footer-content-li">
            <div class="content-line">地址：{{ setting.schoolAddress }}&nbsp;&nbsp;传真：{{ setting.schoolPhone }}&nbsp;&nbsp;邮政编码：{{ setting.yb }}</div>
            <div class="content-line">&nbsp;&nbsp;{{ setting.footerTxt }} - {{ setting.caseNumber }}&nbsp;&nbsp;建议：使用IE10以上、Chrome或Firefox等浏览器</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.footer-body {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  .footer-fix {
    min-width: 75rem;
    padding: 0 calc(50% - 40.8rem);
    height: 100%;
    box-sizing: border-box;
    position: relative;
    color: var(--font-color);
    .footer-header {
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      padding-top: 25px;
      padding-bottom: 25px;
      box-sizing: border-box;
      .footer-content {
        width: 100%;
        height: 60px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        .footer-image {
          height: 60px;
          text-align: center;
          .el-image {
            margin-top: 10px;
            height: 40px;
            width: auto;
            img {
              height: 40px;
              width: auto;
            }
          }
        }
        .footer-content-li {
          height: 60px;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          justify-content: center;
          font-weight: bolder;
          color: #606266;
          .content-line {
            height: 30px;
            line-height: 30px;
            font-size: 0.9rem;
            text-align: center;
          }
        }
      }
      .footer-content-active {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-weight: bolder;
        color: #606266;
        font-size: 0.9rem;
      }
    }
  }
}
</style>
